<template>
  <div class="contain">
    <div style="width:60%" class="item">
      <div style="margin-bottom:5px">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button type="primary" @click="handleRefresh">刷新</el-button>
        <!-- <el-button type="primary" @click="handleEdit(scope.row.id,scope.$index)">编辑</el-button> -->
      </div>
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        border
        height="500"
        highlight-current-row
        :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
        style="width: 100%"
        @row-click="selectionChangeHandle"
      >
        <el-table-column min-width="90" prop="areaName" label="专区名称">
          <template v-slot="{ row }">
            <input-with-dialog
              v-if="row.addFlag"
              v-model="row.area"
              :props="{label:'styleName',value:'styleCode'}"
              :config="areaConfig"
              @change="areaChange(row)"
            />
            <!-- <el-input v-if="scope.row.addFlag" v-model="scope.row.areaCode" placeholder="请输入编码" /> -->
            <span v-else>{{ row.areaName }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="90" prop="areaCode" label="专区编码">
          <template v-slot="{ row }">
            <!-- <el-input v-if="scope.row.isEdit" v-model="scope.row.areaCode" placeholder="请输入名称" /> -->
            <span>{{ row.areaCode }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="90" prop="superCategoryCode" label="品类">
          <template v-slot="{ row }">
            <!-- <el-input v-model="row.superCategoryCode" :disabled="!row.isEdit" placeholder="品类" /> -->
            <el-select
              v-model="row.superCategoryCode"
              :disabled="!row.isEdit"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in zoneDivisionList"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column min-width="90" prop="sizeIntervalCode" label="尺寸区间">
          <template v-slot="{ row }">
            <el-select
              v-if="row.isEdit"
              v-model="row.sizeIntervalCode"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in sizeList"
                :key="item.intervalCode"
                :label="item.intervalCode"
                :value="item.intervalCode"
              />
            </el-select>
            <span v-else>{{ row.sizeIntervalCode }}</span>
            <!-- <el-input v-if="scope.row.addFlag" v-model="scope.row.sizeIntervalCode" placeholder="请输入尺寸区间" /> -->
          </template>
        </el-table-column>
        <el-table-column min-width="90" prop="priceIntervalCode" label="价格区间">
          <template v-slot="{ row }">
            <el-select
              v-if="row.isEdit"
              v-model="row.priceIntervalCode"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in priceList"
                :key="item.intervalCode"
                :label="item.intervalCode"
                :value="item.intervalCode"
              />
            </el-select>
            <span v-else>{{ row.priceIntervalCode }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="140" prop="" label="操作">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.isEdit" type="text" @click.stop="handleEdit(scope.row,scope.$index)">编辑</el-button>
            <el-button v-else type="text" @click.stop="handleSave(scope.row,scope.$index)">保存</el-button>
            <el-button v-if="scope.row.isEdit" type="text" @click.stop="reFreshData(scope.row,scope.$index)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="width:38%" class="item">
      <div style="margin-bottom:5px">
        <el-button type="primary" @click="handleAddItem">新增</el-button>
      </div>

      <el-table
        v-loading="childLoading"
        :data="childData"
        border
        highlight-current-row
        height="500"
        :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
        style="width: 100%"
      >
        <el-table-column min-width="80" prop="categoryCode" label="品类编码">
          <template slot-scope="scope">
            <el-input v-if="scope.row.addFlag" v-model="scope.row.categoryCode" placeholder="请输入编码" />
            <span v-else>{{ scope.row.categoryCode }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="130" prop="categoryName" label="品类名称">
          <template slot-scope="scope">
            <el-input v-if="scope.row.isEdit" v-model="scope.row.categoryName" placeholder="请输入品类名称" />
            <span v-else>{{ scope.row.categoryName }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="140" prop="" label="操作">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.isEdit" type="text" @click="handleEditItem(scope.row,scope.$index)">编辑</el-button>
            <el-button v-else type="text" @click="handleSaveItem(scope.row,scope.$index)">保存</el-button>
            <el-button v-if="scope.row.isEdit" type="text" @click="refreshChildData()">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getDictByPatchType } from '@/api/dataDict'
import { formaterData } from '@/utils'
import { getAreaList } from '@/api/display/areaMatain'
import { getSpaceList, saveSpaceList, getChildTableList, saveChildTableList } from '@/api/display/space'
export default {
  name: 'SpaceNCategory',
  data() {
    return {
      formaterData,
      activeCode: '',
      childLoading: false,
      tableLoading: false,
      tableSelected: [],
      zoneDivisionList: [],
      childData: [],
      tableData: [],
      sizeList: [],
      priceList: [],
      areaConfig: {
        title: '专区',
        interfacePath: `/slm-admin/api/v1/configStyle/page`,
        method: 'post',
        filtersRaw: [{ 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' }],
        setting: [
          {
            prop: 'styleCode',
            title: '编码'
          },
          {
            prop: 'styleName',
            title: '名称'
          }
        ]
      }
    }
  },
  async  created() {
    this.reFreshData()
    this.getSelectData()
    const { ZONE_DIVISION } = await getDictByPatchType(['ZONE_DIVISION'])
    this.zoneDivisionList = ZONE_DIVISION // 专区划分
  },
  methods: {
    getSelectData() {
      getAreaList().then(res => {
        if (res.success) {
          this.sizeList = res.data.filter(v => v.intervalType === 'B')
          this.priceList = res.data.filter(v => v.intervalType === 'A')
        }
      })
    },
    refreshChildData() {
      this.childLoading = true
      getChildTableList(this.activeCode).then(res => {
        if (res.success) this.childData = res.data.records
        this.childLoading = false
      }).catch(() => {
        this.childLoading = false
      })
    },
    selectionChangeHandle(data) {
      this.activeCode = data.areaCode
      if (this.activeCode) this.refreshChildData()
    },
    reFreshData() {
      this.tableLoading = true
      getSpaceList().then(res => {
        if (res.success) this.tableData = res.data
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSave(data, index) {
      if (!data.areaCode || !data.areaName || !data.sizeIntervalCode || !data.priceIntervalCode || !data.superCategoryCode) {
        this.$message.warning('请完善新增数据')
        return
      }
      const temp = this.zoneDivisionList.filter(v => v.dictCode === data.superCategoryCode)
      saveSpaceList({ ...data, superCategoryName: temp[0].dictName }).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.tableData[index].isEdit = false
        }
      })
    },
    handleSaveItem(data, index) {
      if (!data.categoryName || !data.categoryCode) {
        this.$message.warning('请完善新增数据')
        return
      }
      saveChildTableList(data).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.childData[index].isEdit = false
          this.refreshChildData()
        }
      })
    },
    handleAdd() {
      const data = { isEdit: true, addFlag: Math.floor(Math.random() * 0xffffff).toString(16),
        areaCode: '', areaName: '', sizeIntervalCode: '', priceIntervalCode: '', enable: 1,
        superCategoryCode: '', superCategoryName: '' }
      this.tableData.unshift(data)
    },
    handleAddItem() {
      if (!this.activeCode) {
        this.$message({
          showClose: true,
          type: 'warning',
          duration: 800,
          message: '请先选择主表数据'
        })
        return
      }
      const data = { areaCode: this.activeCode, isEdit: true,
        addFlag: Math.floor(Math.random() * 0xffffff).toString(16), categoryName: '', categoryCode: ''
      }
      this.childData.unshift(data)
    },
    handleEdit(data, index) {
      // if (!this.singleJudge(this.tableSelected, '编辑', true)) {
      //   return
      // }
      this.$set(this.tableData[index], 'isEdit', true)
    },
    handleEditItem(data, index) {
      this.$set(this.childData[index], 'isEdit', true)
    },
    handleRefresh() {
      this.reFreshData()
      this.childData = []
      this.activeCode = ''
    },
    areaChange(row) {
      if (row.area && row.area.length > 0) {
        const data = row.area
        this.$set(row, 'areaName', data[0].styleName)
        this.$set(row, 'areaCode', data[0].styleCode)
      } else {
        this.$set(row, 'areaName', '')
        this.$set(row, 'areaCode', '')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.contain{
  display:flex;
  justify-content: space-between;
  .item{
    // width: 49%;
  }
}
</style>
